<!--  -->
<template>
  <div class="advice">
      <!-- <HeaderTop title="意见反馈"></HeaderTop> -->
      <form @submit.prevent="advice">
          <div class="advice-box">
            <div class="problem">
                <div class="problem-btn" :class="{on:one}" @click="remarkType1">产品问题</div>
                <div class="problem-btn" :class="{on:!one}" @click="remarkType2">其他问题</div>
            </div>
            <x-textarea :max="200" placeholder="请填写您要退货的详细原因" v-model="textarea"></x-textarea>
        </div>
        <div class="advice-btn">
            <button class="sub">提交反馈</button>
        </div>
      </form>
  </div>
</template>

<script>
import { XTextarea } from 'vux'
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
export default {
    data () {
        return {
            one:true,
            userId:null,
            token:'',
            textarea:'',
            remarkType:1
        };
    },

    components: {
        // HeaderTop,
        XTextarea
    },
    mounted(){
        this.userId = this.userInfo.userInfo.id
        this.token = this.userInfo.token
    },
    computed: {
        ...mapState(['userInfo'])
    },

    methods: {
        async advice(){
            const {userId,token,textarea,remarkType} = this
            // remarkType默认是1 如果切换调用方法
            console.log(userId,token,textarea,remarkType)
            const result = await this.API.reqAdvice({userId,token,remark:textarea,remarkType})
            console.log(result)
            if(result.retCode === '000'){
                // 提交反馈成功 弹出框 并清空意见反馈的状态
                this.$toast('意见反馈提交成功');
                this.remarkType = 1
                this.textarea = ''
                this.one = true
                // this.$dialog.alert({
                //     message: '意见反馈提交成功'
                // }).then(()=>{
                //     this.remarkType = 1
                //     this.textarea = ''
                //     this.one = true
                // })
            }
        },
        remarkType1(){
            this.one = true
            this.remarkType = 1
        },
        remarkType2(){
            this.one = false
            this.remarkType = 2
        }
    }
}

</script>

<style lang='stylus'>
//  .vux-x-textarea.weui-cell
//     border none
    .vux-x-textarea.weui-cell:before
        border-top none
    .weui-cell__bd
        .weui-textarea
            height 130px
            font-size 15px
        .weui-textarea-counter
            font-size 13px
</style>

<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.advice
    width 100%
    height 100%
    padding-bottom 0 !important
    background #fff
    .advice-box
        bottom-border-1px(#DBDBDB)
        // top-border-1px(#DBDBDB)
        .problem
            padding 15px 20px
            .problem-btn
                display inline-block
                width 75px
                height 35px
                line-height 35px
                text-align center
                outline none
                background #fff
                border 1px solid #B4B4B4
                border-radius 30px
                color #666666
                margin-right 15px
                font-size 14px
                &.on
                    border-color #7D7D7D
                    color #fff
                    background #145B3E
    .advice-btn
        margin-top 40px
        display flex 
        justify-content center
        .sub
            border 1px solid #e4e4e4
            width 305px
            border-radius 100px
            height 47px
            font-size 15px
            background #145B3E
            color #fff
</style>